<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改个人信息</title>
  <script src="../static/static/vue.min.js"></script>
  <script src="../static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="../static/lib-master/theme-chalk/index.css" />
  <script src="../static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
  <script src="../static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="app">
  <el-form :model="dataForm" label-width="80px">
    <!--<el-form-item label="用户姓名" prop="userName">
      <el-input v-model="dataForm.userName" placeholder="用户姓名"></el-input>
    </el-form-item>-->
    <!--<el-form-item label="租房次数" prop="rentCount">
      <el-input v-model="dataForm.rentCount" placeholder="租房次数"></el-input>
    </el-form-item>-->
    <el-form-item label="用户昵称" prop="nickName" style="width: 400px">
      <el-input v-model="dataForm.nickName" placeholder="用户昵称"></el-input>
    </el-form-item>
    <!--<el-form-item label="身份证" prop="idCard">
      <el-input v-model="dataForm.idCard" placeholder="身份证" readonly></el-input>
    </el-form-item>-->
    <el-form-item label="用户头像" prop="userImg">
      <el-upload class="avatar-uploader" action="http://localhost:8003/user/house-user/upload"
                 :show-file-list="false" :on-success="handleAvatarSuccess">
        <img v-if="dataForm.userImg" :src="dataForm.userImg" class="avatar" width="100%">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dataFormSubmit()">编辑</el-button>
  </span>
</div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        baseUrl: "http://localhost:88/api",
        visible: false,
        dataForm: {
          userPhone: 0,
          userName: '',
          rentCount: '',
          nickName: '',
          idCard: '',
          userImg: ''
        },
      }
    },
    created() {
      axios.defaults.withCredentials = true;
    },
    methods: {
      // 表单提交
      dataFormSubmit () {
        axios.post(`${this.baseUrl}/user/house-user/update`, this.dataForm).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                window.close();
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      // 图片添加成功
      handleAvatarSuccess(res) {
        this.dataForm.userImg = res.url;
      },
    }
  })
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
</html>